<!DOCTYPE html>
<html lang='zh-cn'>
<head>
    <title>Insert you title</title>
    <meta name='description' content='this is my page'>
    <meta name='keywords' content='keyword1,keyword2,keyword3'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel='stylesheet' type='text/css' href='./css/index.css' />
    <script type="text/javascript" src="./../../head.js"></script>
    <style type='text/css'>
        html,body {
            margin: 0; padding: 0;
        }

        html {
            background: #999; height: 100%;
        }

        #can {
            background: #FFF; display: block; margin: 75px auto; border-radius: 2px;
        }
    </style>
    <script type='text/javascript'>
        $( function(){
            var oCan = $( '#can' ).get( 0 ).getContext( '2d' );
            oCan.beginPath();
            oCan.arc( 250 , 250 , 100 , 0 , 360 * Math.PI / 180 , false ); /* 现在的基准点是 canvas画布的顶点(0,0),所以在调用arc()坐标点是(250,250) */
            /*
                上面写法的替代方法:
                oCan.translate(250,250);    // 这种方法和上面方法还是有不同的,这种方法是将整个画布的起始点全部移动到(250,250)位置,儿上面的只是在(250,250)的位置画个圆
                oCan.arc( 0 , 0 , 100 , 0 , 360 * Math.PI / 180 , false );

             */
            oCan.lineWidth = 1;
            oCan.strokeStyle = '#F00';
            oCan.stroke();
            oCan.closePath();
        } );
        function getId( id ){
            return document.getElementById( id );
        }
    </script>
</head>
<body>
<canvas id='can' width='500' height='500'>您的浏览器版本过低,请您更换浏览器以获取更好的用户体验...</canvas>
</body>
</html>